<template>
  <div class="cart">
      <div class="top">
        <span class="span11">登陆后将同步您的购物车商品</span>
        <van-button plain type="info" color="red" round size="small" to="login">登录</van-button>
      </div>

      <van-empty
      class="custom-image"
      image="https://img02.hua.com/m/Shopping/m_shopping_empty_cart.png?v2"
      description="购物车内暂时没有商品"
    >
      <template>
        <van-button round type="info" size="small" to="home">去逛逛</van-button>
      </template>
    </van-empty>

    <hr />

    <!-- 推荐商品 -->
    <van-grid :gutter="10" :column-num="2" icon-size="140px">
      <van-grid-item v-for="list in lists"
       :key="list.ItemCode"
       icon="photo-o"
       class="van-multi-ellipsis--l3"
       @click="goCategory(list.ItemCode)"
      >
      <template #text>
        <div class="van-multi-ellipsis--l2">{{list.Cpmc}}·{{list.Instro}}</div>
        <div style="color:red">￥{{list.Price}}</div>
      </template>
      </van-grid-item>
    </van-grid>

    <div class="di">已经到底了...</div>

    <div class="kon"></div>
    </div>
</template>

<script>
// 引入 axios
import axios from 'axios'
// 引入由 axios 进行二次封装的 request 文件
// import request from '../../utils/request'
import { Toast } from 'vant'

export default {
  name: 'Cart',
  data: function () {
    return {
      lists: [],
    }
  },
  created () {
    // request({
    //   url: '/api/column/baokuan?start=0',
    // })
    //   .then(res => {
    //     console.log('请求成功：', res)
    //     this.lists = res.list
    //     console.log(this.lists)
    //   })
    //   .catch(err => { console.log('请求失败：', err) })
    axios({
      url: 'https://m.hua.com/home/GetProductListPrice',
      method: 'POST',
      params: {
        start: 0,
      },
      data: 'itemcodes=9010966,9012471,9012154,9012455,9012175,9012450',
    })
      .then(res => {
        console.log('请求成功：', res)
        this.lists = res.data.Datas.ProductPrices
        console.log(this.lists)
      })
      .catch(err => { console.log('请求失败：', err) })
    // // axios.get('http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=20&sort=0')
    // //   .then(res => {
    // //     console.log('请求成功：', res)
    // //   })
    // //   .catch(err => { console.log('请求失败：', err) })
  },
  methods: { // 方法
    goCategory () {
      Toast('没有数据，无法显示')
    },
  },
}
</script>

<style lang="less" scoped>

  .cart .top{
    width: 100%;
    height: 50px;
    background-color: bisque;
    .span11{
      text-align: center;
      line-height: 50px;
      vertical-align:middle;
      margin-left: 55px;
      font-size: 14px;
      float: left;
    }
    .van-button--small{
      width: 60px;
      height: 25px;
      margin-left: 10px;
      margin-top: 13px;
    }
  }

  /deep/ .custom-image .van-empty__image {
    width: 150px;
    height: 110px;
  }
  /deep/ .van-empty__bottom {
    margin-top: 0;
  }
  // 按钮宽度
  .van-button--small{
    width: 100px;
  }
  // 按钮字体粗细
  .van-button--info{
    font-weight: 500;
  }

  hr{
    height: 8px;
    border: none;
    background-color: rgb(227, 234, 241);
  }

  .van-multi-ellipsis--l2{
    font-size: 14px;
  }

.di{
  text-align: center;
  font-size: 14px;
  color: rgb(166, 166, 167);
}
  .kon{
    height: 60px;
  }
</style>
